<template>
    <div>
        <van-row class="editor-box-tit background-fff">
            <van-col span="8">
                <img class="center-jt" src="../../assets/image/center/icon_return.png" alt="" @click="$router.back(-1)">
            </van-col>
            <van-col span="8" class="text-align-c color-3 font-3">
                修改手机绑定
            </van-col>
            <van-col span="8" class="text-align-r color-3 font-3">
                <span class="wancheng" @click="updatePhone()">确认</span>
            </van-col>
        </van-row>
        <div class="ziliao1 clearfix background-fff">
            <ul class="clearfix">
                <li>
                    <label class="fl font-3">原手机号</label>
                    <input class="fl text-align-l font-3 phone-input" v-model="phone"  type="text" readonly>                    
                </li>
                <li>
                    <label class="fl font-3">新手机号</label>
                    <input class="fl text-align-l font-3 phone-input" v-model="newPhone" type="text">
                </li>
                <li>
                    <input class="fl text-align-l font-3" type="text" placeholder="请输入验证码" v-model="code">
                    <span class="fr yzm font-24 text-align-c font-3" @click="yzmSong()">{{btntxt}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import { Toast } from 'vant'
import apiHttp from '../../api/index'
export default {
    data(){
        return{
            phone:this.$route.query.phone,
            newPhone:'',
            time:0,
            btntxt:'获取验证码',
            code:''
        }
    },
    created(){
    },
    methods:{
        yzmSong(){
            if(this.btntxt == '获取验证码'){
                let reg=/^((13|14|15|17|18|19)[0-9]{1}\d{8})$/
                //let reg = 11 && /^1(3|4|5|7|8)\d{9}$/
                if(this.newPhone==''){
                    Toast('请输入手机号码')
                }else if(!reg.test(this.newPhone)){
                    Toast('手机格式不正确')
                }else{
                    this.time = 60
                    this.timer()
                    this.yzm()
                }
            }
        },
        timer() {
            if (this.time > 0) {
                this.time--
                this.btntxt=this.time+"s后重新获取"
                setTimeout(this.timer, 1000)
            } else{
                this.time = 0
                this.btntxt = "获取验证码"
            }
        },
        yzm(){
            apiHttp.apiLogin.yzm(this.newPhone,'',resp=>{
                if(resp.code==200){
                    Toast('验证码发送成功')
                }
            })
        },
        updatePhone(){
            apiHttp.apiCenter.updatePhone(this.newPhone,this.code,'',resp=>{
                if(resp.code == 200){
                    Toast('换绑成功')
                    this.$router.push({
                        name:'centerAll'
                    })
                }else{
                    Toast(resp.message)
                }
            })
        }
    }
}
</script>

<style scoped>
.ziliao1 li {
    height: 1.8rem;
    line-height: 1.8rem;
    color: #333;
    font-size: .52rem;
    border-bottom: #eeeeee solid .04rem;
    padding: 0 .6rem;
}
.yzm{
    background-color: #D84E4D;
    height: 1.12rem;
    line-height: 1.2rem;
    display: block;
    width: 3.6rem;
    color: #fff;
    border-radius: .6rem;
    margin-top: .34rem;
    overflow: hidden;
    padding: 0 .2rem;
}
.phone-input{
    padding-left: .5rem;
}
</style>
